<template>
  <div class="table">

    <div class="container">
      <div class="handle-box">
        <!--<el-button type="primary" size="mini" @click="delAll">批量删除</el-button>-->
        <!--<el-input v-model="select_word" size="mini" placeholder="查询管理员（id,用户名，昵称）" class="handle-input"></el-input>-->
        <!-- <el-button type="primary" size="mini" @click="centerDialogVisible = true">添加用户</el-button> -->


        <div class="selectBox">
          <div>
            <div> 手机号：</div>
            <div class="block">
              <el-input v-model="select_phone" placeholder="输入手机号" class="handle-input"></el-input>
            </div>
          </div>

          <div>
            <div> 用户姓名：</div>
            <div class="block">
              <el-input v-model="select_user_true_name" placeholder="输入用户真实姓名" class="handle-input"></el-input>
            </div>
          </div>

          <div>
            <div> 学校</div>
            <div class="block">
              <el-input v-model="select_school" placeholder="输入用户学校名称" class="handle-input"></el-input>
            </div>
          </div>

          <div>
            <div class="block" style="padding-top: 0px">
              <el-button type="primary" @click="selectBtn">查询</el-button>
            </div>
          </div>
        </div>



      </div>
    </div>

    <el-table class="el-table_p" size="mini" ref="multipleTable"
      :header-cell-style="{ background: '#f4f3f9', color: 'black', }" border :data="userList"
      :row-class-name="tableRowClassName">
      <el-table-column width="80" prop="num" label="序号" align="center"></el-table-column>
      <!--<el-table-column prop="id" label="用户id" align="center"></el-table-column>-->
      <el-table-column prop="phone" label="用户号码" align="center"></el-table-column>
      <el-table-column prop="userTrueName" label="用户真实姓名" align="center">
        <template slot-scope="scope">
          <div :style="{fontWeight: scope.row.userTrueName ?'':'bold'}">{{ scope.row.userTrueName?scope.row.userTrueName:'(未实名)' }}</div>

        </template>
      </el-table-column>
      <el-table-column prop="school" label="学校" align="center"></el-table-column>
      <el-table-column prop="createTime" label="注册时间" align="center"></el-table-column>
      <el-table-column prop="email" label="邮箱地址" align="center"></el-table-column>
      <!--<el-table-column prop="cardExpireDate" label="身份证信息" align="center" >-->
      <!--<template slot-scope="scope">-->
      <!--<div @click="cardExpire(scope.row)" :style="{ color: cardExpireDateForm(scope.row) == '有效期内' ? '' : 'red' }" v-html="cardExpireDateForm(scope.row)"></div>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="操作" align="center">
        <!-- <el-table-column label="操作" align="center" v-if="level == 0"> -->
        <template slot-scope="scope">
          <el-button size="mini" class="template_btn" type="primary" @click="handleView(scope.row)">查看详细</el-button>

          <!--<el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>-->
          <!--<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>-->

        </template>
      </el-table-column>

    </el-table>
    <el-dialog title="用户身份证" :visible.sync="cardVisible" width="300px" center>
      <div align="center">
        <img :src="'http://payment.itentbase.com/' + idCardFontUrl" />
        <img :src="'http://payment.itentbase.com/' + idCardFontUrl" />
      </div>
      <span slot="footer">
        <el-button size="mini" @click="cardVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改用户" :visible.sync="editVisible" width="400px" center>
      <el-form :model="form" ref="form" label-width="80px" :rules="rules">
        <el-form-item prop="account" label="用户名" size="mini">
          <el-input v-model="form.account" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="nickName" label="昵称" size="mini">
          <el-input v-model="form.nickName" placeholder="昵称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="editVisible = false">取消</el-button>
        <el-button size="mini" @click="editSave" type="primary">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="删除管理员" :visible.sync="delVisible" width="300px" center>
      <div align="center">删除不可恢复，是否确定删除？</div>
      <span slot="footer">
        <el-button size="mini" @click="delVisible = false">取消</el-button>
        <el-button size="mini" @click="deleteRow" type="primary">确定</el-button>
      </span>
    </el-dialog>


    <!-- 分页 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
        :page-sizes="[10, 20, 30, 40]" :page-size="size" layout="total, sizes, prev, pager, next" :total="total">
      </el-pagination>

    </div>

  </div>
</template>

<script>
import { get_UserList, addUser, updateUser, delUser } from '../../api/public/api';
import { mixin } from '../../../static/js/index';

export default {
  mixins: [mixin],
  data() {
    return {
      idCardBackUrl: "",
      idCardFontUrl: "",
      cardVisible: false,
      current: 1, //分页
      size: 10,
      pages: 1,
      total: 0,

      level: 0,
      userList: [],
      select_phone: '',
      select_user_true_name: '',
      select_school: '',
      registerForm: {      //添加框
        account: "",
        paw: "",
        nickName: "",

      },
      form: {      //编辑框
        account: "",
        pwd: "",
        pwd1: "",
        nickName: "",
      },
      id: "",

      centerDialogVisible: false, //添加弹窗是否显示
      editVisible: false,         //编辑弹窗是否显示
      delVisible: false,          //删除弹窗是否显示

      rules: {
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],

        nickName: [
          { required: false, message: '请输入昵称', trigger: 'blur' }
        ]
      },
      iden: 0,//绑定身份证信息

    }
  },

  created() {
    let data = {
      current: this.current,
      size: this.size
    }
    this.getData(data);
    this.level = localStorage.getItem('level')
  },
  methods: {
    // 未实名行添加背景
    tableRowClassName({row, rowIndex, }) {
    
      if (!row.userTrueName) {
        return 'norealname-row'
      } 
      return ''

    },

    cardExpire(row) {
      // let href = window.location.href.split('/')[0]+'//'+window.document.location.host;
      this.cardVisible = true
      let expDate = new Date(row.cardExpireDate).getTime();
      if (expDate) {
        this.imgFontUrl = 'http://payment.itentbase.com/' + row.idCardBackUrl
        this.imgBackUrl = 'http://payment.itentbase.com/' + row.idCardFontUrl
        // this.idCardBackUrl=href+row.idCardBackUrl
        // this.idCardFontUrl=href+row.idCardFontUrl

        console.log(row)
      }

    },
    // 根据条件查询订单
    selectBtn() {
      let data = {
        phone: this.select_phone,
        userTrueName: this.select_user_true_name,
        school: this.select_school
      }
      this.getData(data);
    },

    // 跳转 个人所有信息
    handleView(row) {
      this.$router.push({
        path: '/userDetail',
        query: {
          id: row.id
        }
      })
    },

    updateData() {
      // console.log('current', current);
      let data = {
        current: this.current,
        size: this.size
      }
      this.getData(data);
    },
    // 第几页
    handleCurrentChange(val) {
      this.current = val;
      this.updateData()
    },
    handleSizeChange(val) {
      this.size = val;
      this.updateData()
    },
    //查询所有用户
    getData(data) {
      get_UserList(data).then(res => {

        if (res.data.code == 0) {
          this.pages = res.data.data.pages
          this.total = res.data.data.total
          // this.size = res.data.data.size
          let num = 1
          res.data.data.records.map(item => {
            const t = new Date(item.createTime)
            const y = t.getFullYear()
            const m = t.getMonth() + 1
            const d = t.getDate()
            item.num = num++
            item.createTime = y + "-" + m + "-" + d
          })

          this.userList = res.data.data.records
          // console.log('----', res.data.data.records);

        }


      })
    },
    //添加管理员
    addUser() {
      this.$refs['registerForm'].validate(valid => {
        if (valid) {
          let params = {
            'account': this.registerForm.account,
            'nickName': this.registerForm.nickName,
            'pwd': this.registerForm.pwd
          };

          addUser(params)
            .then(res => {
              console.log(res)
              if (res.data.code == 0) {
                this.centerDialogVisible = false;
                this.notify("添加成功", "success");
                this.updateData()
              } else {
                this.notify("添加失败", "error");
              }
            })
            .catch(err => {
              console.log(err);
            });
          this.registerForm = {      //添加框
            account: "",
            paw: "",
            nickName: "",

          }
        }
      })

    },
    //弹出编辑页面
    handleEdit(row) {
      console.log(row)
      this.id = row.id
      this.editVisible = true;
      this.form = {      //编辑框
        account: row.account,
        nickName: row.nickName,
      }

    },
    //保存编辑页面修改的数据
    editSave() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let params = {
            'id': this.id,
            'account': this.form.account,
            'nickName': this.form.nickName

          };

          updateUser(params).then(res => {
            if (res.data.code == 0) {
              this.editVisible = false;
              this.notify("修改成功", "success");
              this.updateData()
            } else {
              this.notify("修改失败", "error");
            }
          })
            .catch(err => {
              console.log(err);
            });

        }
      })

    },

    //删除一名用户
    handleDelete(id) {
      this.id = id
      this.delVisible = true

    },
    deleteRow() {

      delUser(this.id)
        .then(res => {
          if (res.data.code == 0) {
            this.delVisible = false;
            this.updateData()
            this.notify("删除成功", "success");
          } else {
            this.notify("删除失败", "error");
          }
        })
        .catch(err => {
          console.log(err);
        });

    },



    cardExpireDateForm(row) {
      // console.log('res',row);


      let nowDate = new Date().getTime();
      let expDate = new Date(row.cardExpireDate).getTime();

      if (expDate == 0) {
        return '未绑定身份证'
      } else {
        // 未超出有效期

        if (expDate >= nowDate) {
          this.iden = 1;
          return '有效期内'
        } else {
          return '已过期'
        }

      }


      console.log('nowDate', nowDate);
      console.log('expDate', expDate);

      return expDate



    }

  },



}
</script>

<style>
.el-table .norealname-row {
  background: rgb(249 213 213);
  /* --el-table-tr-bg-color: var(--el-color-warning-light-9); */
}

.handle-box {
  margin-bottom: 20px;
}

.consumer-img {
  width: 100%;
  height: 80px;
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.pagination {
  display: flex;
  justify-content: center;
}

.block {
  text-align: right
}

.idenTure {
  color: green;
}

.idenFalse {
  color: red;
}

.template_btn {
  margin-bottom: 10px !important;
  margin-left: 0 !important;
}
</style>
